<template>
  <div v-for="item in data" :key="item.id">
    <a-comment>
      <template #actions>
        <div class="day" style="margin-right: 30px">
          {{ getDateDiff(dayjs(item.time).format("YYYY-MM-DD HH:mm:ss")) }}
        </div>
        <p
          key="comment-nested-reply-to"
          style="cursor: pointer"
          @click="changeReply(item, true)"
        >
          回复
        </p>
        <p
          v-if="item.isReply"
          style="margin-left: 15px; color: #da2717; cursor: pointer"
          @click="changeReply(item, false)"
        >
          取消回复
        </p>
      </template>
      <div v-if="item.isReply" class="reply-input">
        <a-textarea v-model:value="replyVal" style="width: 100%" />
        <div class="more">
          <div
            class="emoji"
            style="cursor: pointer"
            @click="showParentEmoji = !showParentEmoji"
          >
            <i class="iconfont icon-emoji" style="font-size: 20px"></i>
          </div>
          <a-button html-type="submit" type="primary" @click="reply(item.id)">
            发布
          </a-button>
        </div>
        <div v-if="showParentEmoji">
          <EmojiPicker
            :native="true"
            style="margin: 10px 0"
            @select="onVue3EmojiPicker"
          />
        </div>
      </div>
      <template #author>
        <a>{{ item.username }}</a>
      </template>
      <template #avatar>
        <a-avatar :src="proxy.baseUrl + item.avatar" alt="Han Solo" />
      </template>
      <template #content>
        <p style="color: #333333">
          {{ item.content }}
        </p>
      </template>
      <comment-child
        :data="changeList(item.children)"
        :parentComment="item.id"
        :treeId="TreeId"
      ></comment-child>
    </a-comment>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { getDateDiff } from "@/utils/tool.js";
import dayjs from "dayjs";
import CommentChild from "./commentChild.vue";
import EmojiPicker from "vue3-emoji-picker";
const { proxy } = getCurrentInstance();
let replyVal = ref("");
let showParentEmoji = ref(false);
const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
  TreeId: {
    type: Number,
    default: 0,
  },
  ParentAdd: {
    type: Function,
    default: () => {},
  },
});
// 是否展开回复
const changeReply = (item, type) => {
  item.isReply = type;
};
// 添加isReply作为中枢 实现单个回复
const changeList = (arr) => {
  if (!Array.isArray(arr)) return arr;
  const newList = arr.map((item) => {
    return { ...item, isReply: false };
  });
  return ref(newList).value;
};
// 回复
const reply = async (id) => {
  props.ParentAdd({
    treeId: props.TreeId,
    parentComment: id,
    user: 2,
    content: replyVal.value,
  });
  replyVal.value = "";
};
const onVue3EmojiPicker = (emoji) => {
  replyVal.value += emoji.i;
};
</script>

<style lang="scss" scoped>
.reply {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  cursor: pointer;
}

.more {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
}

.day {
  font-size: 12px;
}

:deep(.ant-comment-inner) {
  padding: 15px 0 0 !important;

  .ant-comment-content {
    height: 80px !important;
  }
}
</style>